<template>
  <div>
    <header class="header_home">
      <div>
      <img src="http://47.116.207.219/image/logo.png" alt=""><span style="font-weight: 700;">ZSDN</span>
      <router-link to="/user/page" active-class="router-link"><span>首页</span></router-link>
      <router-link to="/user/compile"active-class="router-link" v-if="entryStore.id!=-1&&entryStore.id!==0"><span>文章功能</span></router-link>
      <router-link to="/user/article"active-class="router-link"v-if="entryStore.id==-1"><span>管理中心</span></router-link>
      <router-link to="/user/essay"active-class="router-link"v-if="entryStore.id!=-1&&entryStore.id!==0"><span>用户文章</span></router-link>
      <div class="home_info">
      <login></login>
    </div>
    </div>
    </header>
    <main class="context_home">
      <RouterView />
    </main>
    <footer class="footer_home">
      <p><span>联系电话：027-12345678</span><span>邮政编码：123456</span><span>备案信息：...</span></p>
      <p><span>邮箱：wanzheng@qq.com</span><span>地址：武汉市江汉区XXXXX</span><span>版权所有武汉XXXX有限公司</span></p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router';
import login from '@/components/Login.vue'
import {useEntryStore} from '@/stores/entry'
// import {useTagCenter} from '@/stores/tagCenter'
// import {useArticlesStore} from '@/stores/articles'
import { onMounted } from 'vue';
const entryStore=useEntryStore()
// const TagCenter=useTagCenter()
// const articles=useArticlesStore()
// async function getArticles() {
//   const response = await articles.getArticle();

//   // articles.tableData = response.data.data;
//   articles.tableData.push(response.data.data);
// }
// async function getTag(){
//   const response= await TagCenter.getTags();
//   TagCenter.tableData=response.data.data;
//   TagCenter.tableData.push(response.data.data)
// }
// onMounted(()=>{
//   getArticles()
//   getTag()
// })
</script>

<style>
.header_home img{
  width:40px;
  height:40px;
}
.header_home {
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; 
  border-radius: 4px;
  .router-link{
  border-bottom: 1px solid #1890ff;
  color: #1890ff;
  }
  a {
    margin: 0 15px;
    text-decoration: none;
    color: #000;
    transition: all 0.3s;
  }
}


.header_home a:hover {
  color: #1890ff;
  border-bottom: 1px solid #1890ff;
  background-color: #fff;
}
.home_info{
  float:right;
  position: relative;
  top:3px;
  right:20px;
  color: #1890ff;
  background-color: #fff;
}
.context_home {
  min-height: 80vh; 
  width: 100%;
  box-sizing: border-box;
}

.footer_home {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  background-color: #005cbb;
  padding:0 20px;
  padding-top:20px;
  padding-left:100px;
  span{
    display:inline-block;
    width:300px;
    margin:0 20px;
  }
}
</style> 